<template>
	<view class="recharge-main-box">

		<!-- 菜单栏开始 -->
		<view class="wanl-pay">
			<view class="money bg-white">
				<!-- <text class="title">充值金额</text> -->
				<view class="margin-top price">
					<view class="symbol">
						<text>￥</text>
					</view>
					<input type="digit" maxlength="5" focus v-model="money" />
					<view class="text-lg wanl-gray-light" @tap="emptyInput" v-if="money">
						<text class="wlIcon-shibai"></text>
					</view>
				</view>
				<view class="title text-lg">充值金额 {{smallToBig(money)}}</view>
			</view>
		</view>
		

		<!-- 宫格开始 -->
		<view class="recharge-grid-box">
			<view class="recharge-grid-Item" v-for="(item,index) in List" :key="item.id"
				:class="moneyId == index?'active':''" @click="handleChangeMoney(index)">
				<view class="item-top-money" :class="moneyId == index?'active':''">
					￥{{item.money}}
				</view>
				<view class="item-botton-text" :class="moneyId == index?'active':''">赠送{{item.send_money}}元</view>
				<view class="item-right-top" v-if="moneyId == index"></view>
				<view class="item-right-text" v-if="moneyId == index"><svg t="1681035467620" class="icon"
						viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="7281" width="16"
						height="16">
						<path
							d="M997.888 70.144C686.592 261.12 460.8 502.272 358.912 623.104L110.08 428.032 0 516.608l429.568 437.248C503.296 764.416 737.792 394.24 1024 131.072l-26.112-60.928m0 0z"
							p-id="7282" fill="#ffffff"></path>
					</svg></view>
			</view>
		</view>
		<!-- 宫格结束 -->

		<!-- html文本区域开始 -->
		<!-- <view class="recharge-html-info">
			<view v-html="info"></view>
		</view> -->
		<!-- html文本区域结束 -->

		<view style="height: 140rpx;"></view>
		<!-- 充值按钮开始 -->
		<view class="recharge-main-bottom" :style="hide==true?'display:none':''">
			<view class="recharge-bottom-button" @click="recharge">
				立即充值
			</view>
			<!-- <view class="recharge-bottom-text">如有疑问,请<span>提交问题反馈</span></view> -->
		</view>
		<!-- 充值按钮结束 -->

		<uni-popup ref="popup" type="bottom" :is-mask-click="true" backgroundColor="rgba(0,0,0,0)">
			<view class="popup-content">
				<view class="popup-title">请选择支付方式</view>
				<radio-group>
					<!-- <view class="item" @click="current = 1">
						<view class="item-left">
							<image class="item-left-icon" src="@/static/ysf.png"></image>
							<span>云闪付</span>
						</view>
						<radio value="1" :checked="1 === current" />
					</view> -->

					<view class="item" @click="channel = 'Wxpay'">
						<view class="item-left">
							<image class="item-left-icon" src="https://zm.zonmay.com/public/static/image/wx.jpg"></image>
							<span>微信</span>
						</view>
						<radio value="Wxpay" :checked="'Wxpay' === channel" />
					</view>
					<!-- <view class="item" @click="channel = 'Alipay'">
						<view class="item-left">
							<image class="item-left-icon" src="https://zm.zonmay.com/public/static/image/zfb.png"></image>
							<span>支付宝</span>
						</view>
						<radio value="Alipay" :checked="'Alipay' === channel" />
					</view> -->
				</radio-group>

				<view class="botton" @click="createOrder">确 定</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				hide:false,
				current: 1,
				tab: ['在线充值(推荐)', '官方充值'],
				tabId: 0,
				money: 10000,
				moneyId: 0,
				List: [],
				info: '<p><span style="color:#E53333;"><strong><span style="font-size:14px;">使用新卡充值，额外充值返利1%</span></strong></span></p><p><span style="color:#E53333;"><strong><span style="font-size:14px;"><br /></span></strong></span></p><p><span style="color:#666666;background-color:#FFE500;"><span style="font-size:14px;background-color:#FFE500;color:#666666;">如遇在线充值繁忙，请您切换其他通道</span></span></p><p><span style="color:#999999;background-color:#FFE500;"><span style="font-size:14px;background-color:#FFE500;color:#999999;"><strong><span style="color:#E53333;"><br /></span></strong></span></span></p><p><span style="color:#999999;"><span style="font-size:14px;color:#999999;"><strong><span style="color:#E53333;">温馨提醒：</span></strong></span></span> </p><p><span style="color:#9933E5;font-size:12px;"><span style="font-size:12px;color:#9933E5;"><span style="color:#9933E5;font-size:12px;"><strong>1.禁止修改订单金额支付，否则可能导致不到账</strong></span></span></span> </p><p><span style="color:#9933E5;font-size:12px;"><span style="font-size:12px;color:#9933E5;"><span style="color:#9933E5;font-size:12px;"><strong>2.请勿私下转账，否则无法查询订单</strong></span></span></span> </p><p><span style="color:#009900;"><strong>3.请在</strong><span style="color:#E53333;"><strong><u>90秒内</u></strong></span><strong>完成充值，否则可能导致不到账</strong></span></p>',
				channel: 'Wxpay',
				send_money: 300,
			};
		},
		onLoad() {
			// 支付列表
			let method = 'wap';
			// #ifdef APP-PLUS
			method = 'app';
			// #endif
			// #ifdef MP-BAIDU
			method = 'mini';
			// #endif
			// #ifdef MP-WEIXIN
			method = 'miniapp';
			// #endif
			// #ifdef MP-ALIPAY
			method = 'mini';
			// #endif
			// #ifdef MP-QQ
			method = 'mini';
			// #endif
			
			this.getList()
		},
		methods: {
			emptyInput(){
				this.money = 0;
			},
			smallToBig(money) {
				//  将数字金额转换为大写金额
				var cnNums = new Array(
					"零",
					"壹",
					"贰",
					"叁",
					"肆",
					"伍",
					"陆",
					"柒",
					"捌",
					"玖"
				); //汉字的数字
				var cnIntRadice = new Array("", "拾", "佰", "仟"); //基本单位
				var cnIntUnits = new Array("", "万", "亿", "兆"); //对应整数部分扩展单位
				var cnDecUnits = new Array("角", "分", "毫", "厘"); //对应小数部分单位
				var cnInteger = "整"; //整数金额时后面跟的字符
				var cnIntLast = "元"; //整数完以后的单位
				//最大处理的数字
				var maxNum = 999999999999999.9999;
				var integerNum; //金额整数部分
				var decimalNum; //金额小数部分
				//输出的中文金额字符串
				var chineseStr = "";
				var parts; //分离金额后用的数组，预定义
				if (money == "") {
					return "";
				}

				money = parseFloat(money);
				if (money >= maxNum) {
					//超出最大处理数字
					return "超出最大处理数字";
				}
				if (money == 0) {
					chineseStr = cnNums[0] + cnIntLast + cnInteger;
					return chineseStr;
				}

				//四舍五入保留两位小数,转换为字符串
				money = Math.round(money * 100).toString();
				integerNum = money.substr(0, money.length - 2);
				decimalNum = money.substr(money.length - 2);

				//获取整型部分转换
				if (parseInt(integerNum, 10) > 0) {
					var zeroCount = 0;
					var IntLen = integerNum.length;
					for (var i = 0; i < IntLen; i++) {
						var n = integerNum.substr(i, 1);
						var p = IntLen - i - 1;
						var q = p / 4;
						var m = p % 4;
						if (n == "0") {
							zeroCount++;
						} else {
							if (zeroCount > 0) {
								chineseStr += cnNums[0];
							}
							//归零
							zeroCount = 0;
							chineseStr += cnNums[parseInt(n)] + cnIntRadice[m];
						}
						if (m == 0 && zeroCount < 4) {
							chineseStr += cnIntUnits[q];
						}
					}
					chineseStr += cnIntLast;
				}
				//小数部分
				if (decimalNum != "") {
					var decLen = decimalNum.length;
					for (var i = 0; i < decLen; i++) {
						var n = decimalNum.substr(i, 1);
						if (n != "0") {
							chineseStr += cnNums[Number(n)] + cnDecUnits[i];
						}
					}
				}
				if (chineseStr == "") {
					chineseStr += cnNums[0] + cnIntLast + cnInteger;
				} else if (decimalNum == "" || /^0*$/.test(decimalNum)) {
					chineseStr += cnInteger;
				}
				return chineseStr;
			},
			async getList() {
				await uni.request({
					url: '/api/MemberRecharge/index',
					data: {
						token: uni.getStorageSync("wanlshop:user").token
					},
					method: 'POST',
					success: res => {
						this.List = res.data
					}
				});
			},
			goPage() {
				uni.navigateTo({
					url: '/pages/recahrge-log/recahrge-log'
				})
			},
			handleChangeTab(index) {
				this.tabId = index
				this.hide = false;
			},
			handleChangeMoney(index) {
				this.moneyId = index
				this.money = this.List[index].money
				this.hide = false;
			},
			close() {
				this.$refs.popup.close()
			},
			recharge() {
				this.$refs.popup.open();
				this.hide = true
				// uni.showToast({
				// 	icon: 'none',
				// 	title: '充值类型:' + this.tab[this.tabId] + '充值金额:' + this.List[this.moneyId].money
				// })
				// this.createOrder()
			},
			async createOrder() {
				await uni.request({
					url: '/payment/RechargePay/createOrder',
					method: 'POST',
					data: {
						token: uni.getStorageSync("wanlshop:user").token,
						order_type: this.channel,
						money: this.money,
						send_money: this.send_money
					},
					success: res => {
						// console.log(res)
						// #ifdef APP-PLUS
						this.pay(res.data.order_id);
						// #endif
						
						// #ifdef MP
						this.wx_pay(res.data.order_id);
						// #endif
						
					}
				});
				// 
			},
			async pay(order_id) {
				await uni.request({
					url: '/payment/RechargePay/purchase_recharge',
					method: 'POST',
					data: {
						token: uni.getStorageSync("wanlshop:user").token,
						order_id: order_id,
						order_type: 'wechat',
					},
					success: res => {
						
						console.log(res)
						
						// alert(JSON.stringify(res))
						
						// #ifdef APP-PLUS
						
						if (this.channel == 'Wxpay') {
							// res.data.data.payOrder
							
							console.log(res.data.payOrder)
							uni.requestPayment({
							    provider: 'wxpay',
							    orderInfo: res.data.payOrder,
							    success: (e) => {
							        console.log("success", e);
							        this.paySuccess();
							    },
							    fail: (e) => {
									
									console.log(e)
									
									this.$wanlshop.msg('支付失败，取消支付');
									
									setTimeout(() => {
										uni.redirectTo({
											url:'/pages/user/order/order?state=1'
										})
									}, 2000);
									
									
							        // uni.showModal({
							        //     content: "支付失败,原因为: " + e.errMsg,
							        //     showCancel: false
							        // })
							    },
							    complete: () => {
									this.disabled = false;
							    }
							})
							
						}

						if (this.channel == 'Alipay') {
							uni.requestPayment({
							    provider: 'alipay',
							    orderInfo: res.data,
							    success: (e) => {
							        this.paySuccess();
							    },
							    fail: (e) => {
							        uni.showModal({
							            content: "支付失败,原因为: " + e.errMsg,
							            showCancel: false
							        })
							    },
							    complete: () => {
									this.loading = false;
									this.disabled = false;
							    }
							})
						}
						
						// #endif
						
						
					}
				});
				// 
			},
			async wx_pay(order_id) {
				await uni.request({
					url: '/payment/RechargePay/purchase_recharge',
					method: 'POST',
					data: {
						token: uni.getStorageSync("wanlshop:user").token,
						order_id: order_id,
						order_type: 'miniapp',
					},
					success: res => {
						
						console.log(res)
						
						// alert(JSON.stringify(res))
						
						
						
						// #ifdef MP
						uni.requestPayment({
						    appId: res.data.appId,
						    nonceStr: res.data.nonceStr,
						    package: res.data.package,
						    paySign: res.data.paySign,
							signType: res.data.signType,
							timeStamp: res.data.timeStamp,
						    success: (e) => {
						        // this.paySuccess();
								uni.showToast({
									title:'充值成功'
								})
								setTimeout(function() {
									uni.redirectTo({
										url:'/pages/user/auth/register'
									})
								}, 500)
						    },
						    fail: (e) => {
						        uni.showModal({
						            content: "支付失败,原因为: " + e.errMsg,
						            showCancel: false
						        })
						    }
						})
						// #endif
					}
				});
				// 
			}

		}
	}
</script>

<style lang="scss">
	/deep/ .uni-popup {
		width: 100%;
		z-index: 99999;
	}

	radio-group {
		display: block;
	}
	
	page{
		background:#fff;
	}
	
	.wanl-pay{
		margin-top:80px;
	}

	.wanl-pay .money {
		padding: 25rpx 40rpx 25rpx 60rpx;
	}

	.wanl-pay .money .symbol {
		font-size: 60rpx;
		margin-right: 20rpx;
	}

	.wanl-pay .money .price {
		display: flex;
		align-items: center;
	}

	.wanl-pay .money .price input {
		/* #ifdef MP */
		height: 100rpx;
		min-height: 100rpx;
		/* #endif */
		width: 100%;
		font-size: 100rpx;
	}

	.popup-content {
		z-index:99999;
		background: #fff;
		min-height: 200rpx;
		padding: 20rpx;
		border-radius: 30rpx 30rpx 0 0;

		.popup-title {
			font-size: 28rpx;
			color: #666;
			margin: 30rpx 0;
		}

		.botton {
			width: 100%;
			height: 80rpx;
			background: #214a75;
			color: #fff;
			display: flex;
			align-items: center;
			justify-content: center;
			border-radius: 10rpx;
			margin-top: 90rpx;
			margin-bottom: 20rpx;
		}

		.item {
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-bottom: 20rpx;
			padding: 20rpx;
			border-radius: 20rpx;
			box-shadow: #d4d0d0 0px 0px 6px 0px;


			.item-left {
				display: flex;
				align-items: center;

				.item-left-icon {
					width: 50rpx;
					height: 50rpx;
				}

				span {
					margin-left: 20rpx;
				}
			}
		}
	}

	.header-right-text {
		font-size: 26rpx;
	}

	.recharge-main-box {
		.recharge-tab-box {
			display: flex;
			align-items: flex-start;
			justify-content: space-evenly;
			padding: 30rpx 0;
			// position: relative;
			

			.recharge-tab-item {
				font-size: 28rpx;
				color: #888;
				display: flex;
				align-items: center;
				flex-direction: column;

				&.active {
					color: #214a75;
					font-size: 30rpx;
					font-weight: bold;
				}

				.line {
					height: 6rpx;
					border-radius: 20rpx;
					background: #214a75;
					width: 60rpx;
					margin-top: 16rpx;
				}
			}
		}

		.recharge-main-input {
			input {
				background: #f4f4f4;
				margin: 0 20rpx;
				padding: 30rpx;
				border-radius: 10rpx;
			}
		}

		.recharge-grid-box {
			display: flex;
			flex-wrap: wrap;
			justify-content: center;
			align-content: center;
			margin: 10rpx;

			.recharge-grid-Item {
				width: 30%;
				text-align: center;
				box-sizing: border-box;
				background: #f3f3f3;
				margin: 9rpx;
				border-radius: 10rpx;
				border: 2rpx solid #f3f3f3;
				position: relative;
				overflow: hidden;

				&.active {
					border: 2rpx solid #214a75;
				}

				.item-top-money {
					padding: 30rpx 0;
					font-weight: bold;
					color: rgb(125, 125, 125);

					&.active {
						color: rgb(210, 172, 138);
					}
				}

				.item-top-money::first-letter {
					font-size: 26rpx;
					font-weight: normal;
					color: rgb(210, 172, 138);
				}

				.item-botton-text {
					width: 100%;
					font-size: 24rpx;
					padding: 10rpx 0;
					color: rgb(139, 139, 139);
					border-radius: 0 0 10rpx 10rpx;

					&.active {
						background: #214a75;
						color: #fff;
					}
				}

				.item-right-top {
					position: absolute;
					top: 0;
					right: 0;
					width: 0;
					height: 0;
					border-top: 50rpx solid #214a75;
					border-left: 50rpx solid transparent;
				}

				.item-right-text {
					position: absolute;
					top: 0;
					right: 4rpx;
					color: #fff;
					z-index: 999;
					font-size: 22rpx;

					.icon {
						width: 22rpx;
						height: 22rpx;
					}
				}
			}
		}

		.recharge-html-info {
			margin: 20rpx;
		}

		.recharge-main-bottom {
			position: fixed;
			z-index: 999;
			bottom: 0;
			width: 100%;
			height: 140rpx;
			background: #fff;
			display: flex;
			align-items: center;
			flex-direction: column;
			padding-top: 20rpx;

			.recharge-bottom-button {
				background: #214a75;
				width: 92%;
				height: 80rpx;
				color: #fff;
				display: flex;
				align-items: center;
				justify-content: center;
				border-radius: 10rpx;
			}

			.recharge-bottom-text {
				font-size: 24rpx;
				margin-top: 10rpx;
				color: #666666;

				span {
					color: rgb(235, 98, 92);
				}
			}
		}
	}
</style>